<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // promise 是一个同步方法，promise对象里的then是异步方法 

    // 同步任务  1 2 3  
    // 异步任务  4 5

    console.log(1);
    setTimeout(() => {
      console.log(5);
    });
    let p = new Promise(res => {
      console.log(2);
      res();
    })
    p.then(res => {
      console.log(4);
    })
    console.log(3);

    // 执行顺序 1 2 3 4 5

    /* 
     宏任务和微任务  JS把异步任务又做了进一步划分
    宏任务: 依次排队执行   异步AJAX请求  定时器  文件操作  主代码块（script:用于执行同步代码）
    微任务: 解决js精度问题  Promise.then().catch().finally()    process.nextTick()事件循环的环节(Node.js环境)
    宏任务和微任务执行顺序:每个宏任务执行完毕之后 会检查是否有微任务 如果有执行完所有微任务 再执行下一个宏任务
    */

    // 先执行宏任务 ，每一个宏任务后边会跟随一个微任务队列

    setTimeout(() => {
      console.log('1');
    })

    new Promise((resolve, reject) => {
      console.log('2');
      resolve()
    }).then(() => {
      console.log('3');
    })

    console.log('4');

    // 2 4 3 1 
    // 先执行所有的同步任务 new Promise 是一个同步任务 最先被执行 其次是 '4'
    // 异步任务 在执行new Promise时 .then就已经进入了任务队列 然后执行微任务.then() 最后执行宏任务'1'

  </script>
</body>

</html>